
/*

Copyright 2013 - Tom Alessi

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for specific language governing permissions and
limitations under the License.

System Status Dashboard Stylesheets 

*/




/* GLOBAL FONT */
* {
   font-family: Arial, sans-serif;
}



/* HYPERLINKS */
/* Global */
a {
   color: #005596;
   font-weight: bold;
}



/* PARAGRAPH FORMATTING */
/* Standard paragraph formatting */
p {
   font-size: 15px;
}
/* Error Text */
p.error {
   font-size: 12px;
   font-weight: bold;
   color: red;
   margin: 0;
   padding: 0;
}
/* small text */
p.small{
   font-size: 12px;
}



/* HEADINGS */
h1 {
   font-size: 21px;
}



/* LABELS */
label {
	font-weight: bold;
}



/* TABLES */
/* Global Styling */
table {
   box-shadow: 0 0 5px 1px #ddd;
   border-radius: 3px;
   width: 100%;
}
/* Table for footer */
table.footer {
   border: 0;
}
table.footer td {
   vertical-align: top;
   font-size: 10px;
   padding: 1px 1px 1px 1px;
}
/* Table for jump_to date */
table.jump_to {
   border: 0;
}
table.jump_to td {
   vertical-align: bottom;
   font-size: 11px;
   padding: 1px 1px 1px 1px;
}



/* HR */
/* Top Bar Break */
hr.header_break {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0, 85, 150, 1), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0, 85, 150, 1), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0, 85, 150, 1), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0, 85, 150, 1), rgba(0,0,0,0)); 
}



/* DIVS AND SPACERS */
div.border {
	border: 1px solid #B0C5D0;
}
/* Div containing the custom company logo */
#logo_header {
   margin: 8px;
}
/* Spacer rows when more space is required b/t rows in the layout */
div.spacer_micro {
   height: 5px;
}
div.spacer_small {
   height: 15px;
}
div.spacer_medium {
   height: 35px;
}
div.spacer_large {
   height: 80px;
}
/* Inline button container */
div.horiz_stack {
   display: inline-block;  
}
/* Graph Containers */
div.graph_container {
   margin: 0 auto; 
   border: 1px solid #B0C5D0;
   border-radius:5px;
}
/* Input containers to provide padding b/t label */
div.input_container {
   padding-top: 5px;
}
/* Block container for descriptive content that will be displayed under descriptive labels 
These will usually contain sublabel spans */
div.sublabel_container {
   padding-top: 5px;
   padding-bottom: 8px;
}
/* pseudo hr */
div.hr { 
   width: 100%; 
   height: 1px; 
   border: 0; 
   background-color: #DDDDDD; 
   margin-top: 3px;
   margin-bottom: 6px; 
}
/* Main login window */
div.login_window {
   margin: 30px auto 0 auto;
   min-height: 80px;
   width: 400px;
   padding: 30px;
   box-shadow: 0 0 5px 1px #ddd;
   border-radius: 5px;
   overflow: auto;
}
/* Header containers */
div.header {
   font-size: 11px;
   display: inline-block;
}
/* Search Results formatting */
div.search_results {
   font-size: 14px;
   padding: 2px;
}
/* Timeline containers */
div.timeline_container {
   /* background-color: #f9f9f9; */
   border-style: solid;
   border-width: 1px;
   border-color: #cccccc;
   padding: 10px;
   box-shadow: 0 0 5px 1px #ddd;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}


/* SPANs */
/* Pagination Links */
span.navigation {
   font-size: 12px;
   font-weight: bold;
}
/* Counters */
span.counter {
   font-size: 12px;
   color: red;
}
/* inline element for displaying text under descriptive labels, usually in forms */
span.sublabel {
   font-size: 12px;
   color: black;
}
/* inline element for displaying success messages */
span.success {
   color: #16AF48;
   font-weight: bold;
   font-size: 12px;
}
/* inline element for displaying error messages */
span.err {
   font-size: 12px;
   font-weight: bold;
   color: red;
}
/* inline element for displaying error messages (large) */
span.err_lg {
   font-size: 14px;
   font-weight: bold;
   color: red;
}
/* Green circle indicators */
span.foundicon_container_green {
   position: relative;
   font-size: 16px;  
   color: #00B050;
   bottom: -2px;
}
/* Blue circle indicators */
span.foundicon_container_blue {
   position: relative;
   font-size: 16px; 
   color: #558ED5;
   bottom: -2px;
}
/* Orange circle indicators */
span.foundicon_container_orange {
   position: relative;
   font-size: 16px; 
   color: #FFB805;
   bottom: -2px;
}
/* Red circle indicators */
span.foundicon_container_red {
   position: relative;
   font-size: 16px; 
   color: #FF0000;
   bottom: -2px;
}
/* Navigation links on the dashboard table */
span.foundicon_container_nav {
   position: relative; 
   /* bottom: 1px; */ 
   font-size: 25px; 
   color: #DDDDDD;
}
/* Navigation links on the dashboard page that are part of the timelines */
span.foundicon_container_nav_tl {
   position: relative; 
   bottom: -6px; 
   font-size: 25px; 
   color: #DDDDDD;
}
/* Navigation links on the dashboard table (calendar) */
span.foundicon_container_nav_cal {
   position: relative; 
   font-size: 25px; 
   color: #DDDDDD;
   cursor: pointer;
}
/* General formatting where foundicons are used for links */
span.foundicon_container_iconlink {
   position: relative; 
   font-size: 20px; 
}
/* Foundicon event update delete trash icon */
span.foundicon_container_iconlink_small_trash {
   position: relative; 
   font-size: 18px;
   bottom: -4px;
   right: 2px; 
}
/* Expand/Collapse details link */
span.foundicon_container_expand {
   position: relative; 
   bottom: -3px; 
   color: #DDDDDD;
   cursor: pointer;
}
/* Escalation Arrow */
span.foundicon_container_escalate {
   position: relative;
   bottom: -5px;
   font-size: 20px; 
   color: red;
}
/* Key dropdown links (anywhere but the dashboard) */
span.foundicon_container_key {
   position: relative; 
   bottom: -7px;  
   font-size: 25px; 
   color: #DDDDDD;
}
/* Delete confirmation icon */
span.foundicon_container_delete {
   position: relative; 
   bottom: -7px;  
   font-size: 25px; 
   color: red;
}
/* More information links */
span.foundicon_container_info {
   font-size: 25px; 
}
/* Search icon */
span.foundicon_container_search {
   position: relative;
   bottom: -7px; 
   font-size: 21px;
   color: #DDDDDD;
}
/* Help icons in the index page summary sections */
span.foundicon_container_help {
   position: relative; 
   bottom: -2px; 
   right: 3px;
}
/* Dashboard legend */
span.legend {
   font-size: 12px;
}
/* Footer styling */
span.footer {
   font-size: 10px;
}
/* Index page heading styling */
span.heading {
   font-size: 15px;
   font-weight: bold;
   color: #616161;
}
/* Index page messages when no incidents/maintenances */
span.all_good {
   color: #16AF48;
   font-size: 14px;
}
/* Help Dropdowns */
span.help_drop {
   font-size: 12px;
}
/* Dashboard Indicator Dropdowns */
span.dashboard_drop {
   font-size: 12px;
}
/* Dashboard timeline formatting */
span.timeline {
   font-size: 12px;
}
/* Event updates listing formatting */
span.updates {
   font-size: 12px;
}
/* Mobile dashboard statuses */
span.mobile_red {
   color: #FF0000;
}
span.mobile_blue {
   color: #558ED5;
}
span.mobile_green {
   color: #00B050;
}



/* TEXTAREAS */
textarea {
	height: 150px;
}
textarea.small {
	height: 85px;
}
textarea.config {
   height: 85px;
   width: 300px;
}
textarea.ireport_desc {
   height: 50px;
}
/* x-editable contact field */
textarea.x_editable_contact {
   width: 400px;
   font-size: 12px;
}
/* x-editable event update field */
textarea.x_editable_update {
   width: 300px;
   font-size: 12px;
}



/* JQUERY UI */
div.ui-datepicker, .ui-datepicker td{
	font-size: 12px;
}
/* 
JQuery UI Timepicker
http://trentrichardson.com/examples/timepicker/
*/
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }



/* INPUTS */
input, textarea, select {
   padding: 4px;
   margin-bottom: 9px;
   font-size: 14px;
   color: #3f3f3f;
   border: 1px solid #CCCCCC;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}



/* Global Selects */
select {
   height: 32px;
}
/* Timezone form */
#timezone_form {
   margin: 0px;
   padding: 0px;
}
#tz_pref {
   font-size: 10px;
   width: 200px;
}
#jump_to {
   font-size: 1px;
   width: 1px;
   background: transparent;
   border: none;
}
/* Global text Radius */
input[type="text"] {
   border-radius: 5px;
}
input.date {
   width: 135px;
}
/* x-editable text field */
input.x_editable_text {
   width: 300px;
   font-size: 12px;
   border-radius: 5px;
}
select.email {
   width: 250px;
}
select.config_email {
   width: 100px;
}


/* Sticky Footer */
#sticky_footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: #efefef;
    border-top: 2px solid #eee;
    padding: 5px 0 5px 0;
}



/* SIDE NAV */
.side-nav li.active a:first-child {
   color: #005596;
}
.side-nav li a {
   color: black;
   font-size: 11px;
}



/* DROP DOWNS */
/* Global Styling */
.f-dropdown {
   box-shadow: 0 0 5px 1px #ddd;
}
/* Historical summary status help */
/* Navigation links on table */
.f-dropdown.histsumdrop {
   min-width: 350px;
}

.accordion {
   box-shadow: 0 0 5px 1px #ddd;
}



/* 
Eliminate the divider color 
Cannot figure out how to do this with scss 
*/

.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
    border-left: solid 1px white;
}

